<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable-next-line vue/valid-template-root -->
<script setup>
import { reactive, onMounted, getCurrentInstance } from 'vue'

import { useNoteTag } from '@/store/noteTag.js'
import { getHeatMap } from '@/utils/api/site'
import { getNoteTags, NoteSummaryByTag } from '@/utils/api/note'
import { ArticleSummaryByCategory } from '@/utils/api/article'
// eslint-disable-next-line no-unused-vars
import { AlexMsg } from '@2473o/alexui'
import { useSiteStore } from '@/store/siteinfo'

const siteinfo = useSiteStore()

const app = getCurrentInstance()
const { dayjs } = app.appContext.app.config.globalProperties

const site_info = reactive({
  alives: 0,
  notes: 0,
  posts: 0
})
const target_tag = useNoteTag()

const getTags = async () => {
  classification.tags = await getNoteTags()
  classification.tags.map(async (i) => {
    i.number = await NoteSummaryByTag(i.name)
  })
}

const heatMap = async () => {
  let res = await getHeatMap()
  let data = {}
  res.map((i) => {
    data[i.sun] = i.total
  })

  return data
}

const classification = reactive({
  tags: [
    // {
    //   id: 1,
    //   name: '📝日常',
    //   number: 5
    // },
    // {
    //   id: 2,
    //   name: '👨🏻&zwj;💻工作',
    //   number: 5
    // },
    // {
    //   id: 3,
    //   name: '🎨主题',
    //   number: 7
    // },
    // {
    //   id: 4,
    //   name: '🏙️上海',
    //   number: 5
    // },
    // {
    //   id: 5,
    //   name: '🚀DevOps',
    //   number: 5
    // },
    // {
    //   id: 6,
    //   name: '💊健康',
    //   number: 5
    // },
    // {
    //   id: 7,
    //   name: '🗺️旅行',
    //   number: 5
    // }
  ]
})

const generateDates = () => {
  const dates = []
  const today = dayjs()

  for (let i = 0; i < 60; i++) {
    const date = today.subtract(i, 'day')
    dates.push(date.format('YYYY-MM-DD'))
  }

  return dates
}
const HeatMap = reactive({
  data: [],
  temp: []
})

onMounted(async () => {
  site_info.notes = await NoteSummaryByTag('')
  site_info.posts = await ArticleSummaryByCategory(null)
  let _data = siteinfo.get()
  site_info.alives = dayjs().diff(dayjs(_data.setup), 'day')

  await getTags()

  HeatMap.temp = generateDates()
  HeatMap.data = await heatMap()
})
</script>
<!-- eslint-disable vue/valid-template-root -->
<template>
  <aside class="notes-aside">
    <section class="sticky">
      <div class="heatmap">
        <div class="heatmap-mvp d-flex">
          <div class="heatmap-mvp__item">
            <h5>{{ site_info.alives }}</h5>
            <span>{{ $t('common.Days') }}</span>
          </div>
          <div class="heatmap-mvp__item">
            <h5>{{ site_info.notes }}</h5>
            <span>{{ $t('common.Notes') }}</span>
          </div>
          <div class="heatmap-mvp__item">
            <h5>{{ site_info.posts }}</h5>
            <span>{{ $t('common.Articles') }}</span>
          </div>
        </div>
        <div class="heatmap-map d-flex">
          <template v-for="(date, index) in HeatMap.temp" :key="index">
            <div
              :data-tooltip="`${date} ${HeatMap.data[date] ? '\r\nWrite: ' + HeatMap.data[date] : ''}`"
              class="heatmap-map__item tooltip"
            >
              <div class="heatmap-map__item-block">
                <div class="heatmap-map__item-inner" :class="{ active: HeatMap.data[date] }"></div>
              </div>
            </div>
          </template>
        </div>
      </div>

      <ul class="topic-list menu">
        <template v-for="(item, index) in classification.tags" :key="index">
          <li class="menu-item">
            <a
              class="menu-text"
              :class="{ active: target_tag.get() == item.name }"
              @click="
                target_tag.get() == item.name ? target_tag.set(null) : target_tag.set(item.name)
              "
            >
              <span v-html="item.name"></span>
            </a>
            <div class="menu-badge">
              <label class="label text-tiny">{{ item.number }}</label>
            </div>
          </li>
        </template>
      </ul>
    </section>
  </aside>
</template>
